package com.example.app.components


import androidx.compose.foundation.background
import androidx.compose.foundation.clickable
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.padding
import androidx.compose.material.*
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.filled.AccountBox
import androidx.compose.runtime.*
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp

@OptIn(ExperimentalMaterialApi::class)
@Composable
fun TabRowSample() {
    var select by remember {
        mutableStateOf(0)
    }

    // selectedTabIndex当前选中的Tab下标
    // color = if (select == 0) Color.Red else Color.Black 改变选中颜色
    // indicator = {}可以去除每个tab下方的选中横条
    Column() {
        TabRow(selectedTabIndex = select, indicator = {}) {
            Text(
                color = if (select == 0) Color.Red else Color.Black,
                text = "Tab1",
                modifier = Modifier
                    .padding(20.dp)
                    .background(Color.Blue)
                    .clickable {
                        select = 0
                    }
            )
            Text(text = "Tab2", modifier = Modifier
                .padding(20.dp)
                .background(Color.Red)
                .clickable {
                    select = 1
                })
            Text(text = "Tab3", modifier = Modifier
                .padding(20.dp)
                .background(Color.Green)
                .clickable {
                    select = 2
                })
            // 系统提供的
            // Tab垂直布局
            // selectedContentColor设置选中时颜色
            // unselectedContentColor未选中时颜色
            Tab(
                selected = select == 3,
                onClick = {
                    select = 3
                },
                selectedContentColor = Color.Red,
                unselectedContentColor = Color.Gray,
            ) {
                Text(text = "Tab4")
            }
            Tab(
                selected = select == 4,
                onClick = {
                    select = 4
                },
                selectedContentColor = Color.Red,
                unselectedContentColor = Color.Gray,
                icon = {
                    Icon(imageVector = Icons.Default.AccountBox, contentDescription = "")
                },
                text = {
                    Text(text = "LDN")
                }
            )
            // LeadingIconTab 水平布局
            LeadingIconTab(
                selected = select == 5,
                onClick = {
                    select = 5
                },
                selectedContentColor = Color.Red,
                unselectedContentColor = Color.Gray,
                icon = {
                    Icon(imageVector = Icons.Default.AccountBox, contentDescription = "")
                },
                text = {
                    Text(text = "YXY")
                }
            )
        }
        Text(text = "current index $select")
    }
}

@Preview(
    showSystemUi = true
)
@Composable
fun TabRowSamplePreview() {
    TabRowSample()
}

